<template>
  <div class="align-wrapper">
    <s-row class="row" align="left">
      <s-col class="item" span="8">left</s-col>
      <s-col class="item" span="8">left</s-col>
    </s-row>
    <s-row class="row" align="center">
      <s-col class="item" span="8">center</s-col>
      <s-col class="item" span="8">center</s-col>
    </s-row>
    <s-row class="row" align="right">
      <s-col class="item" span="8">right</s-col>
      <s-col class="item" span="8">right</s-col>
    </s-row>
  </div>
</template>
<script>
import Row from "../../../src/components/Row.vue";
import Col from "../../../src/components/Col.vue";
export default {
  components: {
    "s-row": Row,
    "s-col":Col
  },

};
</script>
<style lang="scss" scoped>
  $background: #3eaf7c;
  * { box-sizing: border-box; }
  .align-wrapper{ text-align: center; color: white;
    .row{ padding-top: 10px;
      > .item { text-align: center; color: white;
        &:nth-child(odd){ background: $background; }
        &:nth-child(even){ background: lighten($background,20%); color: black; }
      }
    }
  }
</style>